<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>出库</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="/assets/javascript/popup/popup.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/assets/styles/search.css">
</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
<div id="outputList">
    <div id="mask_shadow"></div>
    <div class="btn-div">
        <button type="button" class="btn btn-primary" @click="initTable">刷新</button>
        <button type="button" class="btn btn-primary"  id="MyAbnormalModel" @click="viewOutputDetails">查看订单</button>
        <button type="button" class="btn btn-primary" @click="confirmReceipt">确认收货</button>
        <div class="search-box">
            <form action="">
                <select v-model="selected">
                    <option v-for="option in options" :value="option.value">
                        {{ option.text }}
                    </option>
                </select>
                <input v-model.trim="searchInput" placeholder="请输入……">
                <button type="button" class="btn btn-success" @click="search">搜索</button>
            </form>
        </div>
    </div>
    <div>
        <table class="table table-condensed">
            <thead>
            <tr>
                <!--<th>序号</th>-->
                <th>选择</th>
                <th>订单号</th>
                <th>订单状态</th>
                <th>出库单号</th>
                <th>同步状态</th>
                <th>收货人</th>
                <th>快递公司</th>
                <th>快递单号</th>
                <th>收货地址</th>
                <th>创建时间</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="list in outputDate.list" v-cloak>
                <tr>
                    <td>
                        <input type="radio" :value="list.orderId" v-model="checkedDate" >
                    </td>
                    <td>{{list.orderId}}</td>
                    <td>{{list.orderState}}</td>
                    <td>{{list.outputCode}}</td>
                    <td>{{list.outputState}}</td>
                    <td>{{list.receiverName}}</td>
                    <td>{{list.deliveryCompany}}</td>
                    <td>{{list.deliveryCode}}</td>
                    <td>{{list.receiverState+"省"+list.receiverCity+"市"+list.receiverDistrict+"区"+list.receiverAddress}}</td>
                    <td>{{list.created}}</td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div class="footer-pager">
        <!--解析显示分页信息-->
        <!--分页文字信息-->
        <div>共{{outputDate.pages}}页，当前第{{outputDate.pageNum}}页，总{{outputDate.total}}条数据</div>
        <!--分页条信息-->
        <ul class="pagination">
            <!--如果无上一页，不可点-->
            <template v-if="outputDate.hasPreviousPage==false">
                <li><a href="#">&laquo;</a></li>
            </template>
            <!--如果有上一页，可点-->
            <template v-if="outputDate.hasPreviousPage==true">
                <!--点前一页，跳到当前页码前一页-->
                <li @click="to_page(outputDate.pageNum-1)"><a href="#">&laquo;</a></li>
            </template>

            <!--遍历连续显示的页码-->
            <template v-for="pagenum in outputDate.navigatepageNums">
                <!--如果是当前页码，高亮显示-->
                <template v-if="pagenum==outputDate.pageNum">
                    <li class="active"><a href="#">{{pagenum}}</a></li>
                </template>
                <!--如果不是当前页码，正常显示-->
                <template v-if="pagenum!=outputDate.pageNum">
                    <!--点击后把当前页码传送给axios-->
                    <li class @click="to_page(pagenum)"><a href="#">{{pagenum}}</a></li>
                </template>
            </template>

            <!--如果无下一页，不可点-->
            <template v-if="outputDate.hasNextPage==false">
                <li><a href="#">&raquo;</a></li>
            </template>
            <!--如果有下一页，可点-->
            <template v-if="outputDate.hasNextPage==true">
                <!--把当前页码的下一页传送给axios-->
                <li @click="to_page(outputDate.pageNum+1)"><a href="#">&raquo;</a></li>
            </template>
        </ul>
    </div>
    <!-- 弹出框 -->
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">提示内容</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div id="popup" class="popup">
        <div class="title">
            <p>出库单详情</p>
            <span></span>
            <span>x</span>
        </div>
        <div class="cont">
            <iframe src="" scrolling="auto" id="iframeId2" style="width:100%;height:100%;border:0px;"></iframe>
        </div>
    </div>
    <script>
        $(function () {
            $('#popup').popup();
            $("body").css("overflow-y", "hidden");
        });
    </script>
</div>
</body>
<script src="/commons/plugins/iview/js/vue.min.js"></script>
<script src="/commons/plugins/iview/js/vue-router.js"></script>
<script type="text/javascript" src="/commons/plugins/iview/js/axios.min.js"></script>
<script type="text/javascript" src="/commons/js/axiosUtils.js"></script>
<script type="text/javascript" src="/page/js/outputList.js"></script>
</html>